<template>
    <el-upload
    :on-change="handleChange"
    :auto-upload="false"
    :show-file-list="false"
    :disabled="disabled"
  >
    <div slot="trigger" class="upload_button" v-if="!url">
      <div>
        <el-icon size="20"><Plus /></el-icon>
        <div>上传文件</div>
      </div>
    </div>
    <div class="living-example" v-if="url">
      <div class="living-example_img">
        <img :src="url" />
      </div>
      <!-- <div @click.stop="handleFileDel()" class="living-example_del pointer">
        <el-icon size="20">
          <Close />
        </el-icon>
      </div> -->
    </div>
  </el-upload>

</template>
<script setup>
import { ref, getCurrentInstance, computed, onMounted } from "vue";
import { Plus, Close } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
import { useTrigger } from '@/hooks/useValidatorRules.js'
const emits = defineEmits(["update:modelValue"]);
const { emitTrigger } = useTrigger()
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false
  },
});
const url = computed({
  get: () => {
    return props.modelValue;
  },
  set: (file) => {
    emits("update:modelValue", file);
    emitTrigger()
  },
});

const handleFileDel = () => {
  url.value = "";
};
const handleChange = (file) => {
  const formData = new FormData();
  formData.append("uploadFile", file.raw);
  proxy.$post({ url: "/upload", data: formData }).then((res) => {
    url.value = res.url;
  });
};
</script>
<style lang="less" scoped>
.upload_button {
  width: 90px;
  height: 90px;
  line-height: 24px;
  background: #fafafa;
  border-radius: 5px;
  border: 1px dashed rgba(0, 0, 0, 0.17);
  display: flex;
  justify-content: center;
  align-items: center;
  .el-icon {
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    margin-top: 12px;
  }
  div {
    font-size: 12px;
    color: #595959;
    text-align: center;
  }
}
.living-example {
  position: relative;
  .living-example_img {
    width: 90px;
    height: 90px;
    border: 1px dashed rgba(0, 0, 0, 0.17);
  }
}

</style>